<template>
  <div class="app-container">
    <div>
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="分组名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入分组名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div class="mb-[10px]">
        <el-button type="success" icon="plus" @click="handleAddClick()">新增</el-button>
        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
          删除
        </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" />
        <el-table-column label="分组名称" prop="name" />
        <el-table-column label="备注" prop="remark">
          <template #default="{row}">
            {{ row.remark || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="号码总数 / 已获取 / 已发送" prop="dictCode" />
        <el-table-column label="创建时间" prop="createdAt">
          <template #default="{row}">
            {{ row.createdAt ? formatDate(row.createdAt) : '--' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="handleExport(scope.row)">导出</el-button>
            <el-button link type="primary" @click="handleAddClick(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <AddGroup ref="editFormRef" @refresh="handleQuery"/>
    <ExportGroup ref="exportGroupRef" @refresh="handleQuery"/>
  </div>
</template>


<script setup>
import ExportGroup from './exportGroup.vue'
import { formatDate } from "@/utils";
import AddGroup from './addGroup.vue'
import { groupListApi, delGroupApi, exportGroupApi } from '@/api/equipmentManagement/massTexting.api'
import { useParamStore } from '@/store'
const route = useRoute();
const { setParams, getParams, removeFalsyValues } = useParamStore()
const name = route.fullPath + '3'
onMounted(() => {
  if(!!getParams(name)) {
    queryParams.value = getParams(name)
  }
})
const paging = ref({
  size: 10,
  page: 1,
  total: 0,
})

const handleSizeChange = (e) => {
  paging.value.size = e
  getList()
}
const handleCurrentChange = (e) => {
  paging.value.page = e
  getList()
}

const ids = ref([])
const loading = ref(false)
const tableData = ref([])
const queryParams = ref({
  name: void undefined
})

const handleQuery = () => {
  paging.value.page = 1
  paging.value.size = 10
  setParams(queryParams.value, name)
  getList()
}
const queryFormRef = ref(null)
const handleResetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const handleSelectionChange = (e) => ids.value = e.map(item => item.id)

const editFormRef = ref(null)
const handleAddClick = (row) => {
  editFormRef.value.handleOpen(row)
}
const handleDelete = (row) => {
  const isBatch = !row
  const del = async() => {
      if(!isBatch) {
        const res = await delGroupApi({ ids: [Number(row.id)] })
        ElMessage.success('删除成功');
        handleQuery();
        return
      }

      const res =await delGroupApi({ ids: ids.value })
      ElMessage.success('删除成功');
      handleQuery();
  }

  const tips = `确定删除${isBatch ? `${ids.value.length}条记录` : '这条数据'}?`;
  ElMessageBox.confirm(
    tips,
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      del()
    })

}

const getList = () => {
  loading.value = true
  groupListApi({
    page: paging.value.page,
    size: paging.value.size,
    app: 'WA',
    bundle: 'net.whatsapp.WhatsApp',
    ...queryParams.value
  }).then(res => {
    tableData.value = res.rows
    paging.value.total = res.count
    loading.value = false
  }).finally(() => {
    loading.value = false
  })
}
getList()

const exportGroupRef = ref(null)
const handleExport = (row) => {
  console.log(row.id)
  exportGroupRef.value.handleOpen(row.id)
  return 
}
</script>

<style scoped lang="scss">
.pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
